<template>
  <div class="warehousing-detail" v-loading="loading">
    <el-page-header
      content="入库单详情"
      @back="router.back"
      class="detail-header"
    />

    <el-card shadow="never" class="summary-card">
      <div class="summary-top">
        <div class="summary-left">
          <div class="code-line">
            入库单号：
            <br/>
            {{ warehousingIds }}
            <el-tag
              v-if="currentStatus"
              :type="statusTag(currentStatus)"
              size="small"
              class="status-tag"
            >
              {{ statusName(currentStatus) }}
            </el-tag>
          </div>
         
        </div>
        <div class="summary-actions">
          <el-button
            size="small"
            type="primary"
            @click="handleEdit"
            v-if="canEditOrder"
          >
              编辑
            </el-button>
            <el-button size="small" @click="handleCopy">复制</el-button>
          <el-button
            size="small"
            type="warning"
            @click="handleRevoke"
            v-if="canRevokeOrder"
          >
            撤销
          </el-button>
            <el-button size="small" @click="handlePrint">打印</el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete"
            v-if="canDeleteOrder"
          >
              删除
            </el-button>
        </div>
        </div>

      <div class="summary-info">
        <el-descriptions :column="3" border>
          <el-descriptions-item label="制单人" :span="1">
            {{ displayValue(documentCreator) }}
        </el-descriptions-item>
          <el-descriptions-item label="所在部门" :span="1">
            {{ displayValue(organizationName) }}
        </el-descriptions-item>
          <el-descriptions-item label="订单时间" :span="1">
            {{ formatDateTime(documentCreation) }}
        </el-descriptions-item>
          <el-descriptions-item label="入库类型" :span="1">
            {{ displayValue(warehousingTypeId) }}
        </el-descriptions-item>
          <el-descriptions-item label="仓库" :span="1">
            {{ displayValue(warehouseName) }}
        </el-descriptions-item>
          <el-descriptions-item label="入库日期" :span="1">
            {{ formatDateTime(storageDate) }}
        </el-descriptions-item>
          <el-descriptions-item label="关联单号" :span="1">
            {{ displayValue(stockinGoodsNo) }}
        </el-descriptions-item>
          <el-descriptions-item label="供应商" :span="1">
            {{ displayValue(supplierName) }}
        </el-descriptions-item>
          <el-descriptions-item label="交货人" :span="1">
            {{ displayValue(contact) }}
        </el-descriptions-item>
          <el-descriptions-item label="联系方式" :span="1">
            {{ displayValue(contactInformation) }}
        </el-descriptions-item>
          <el-descriptions-item label="经办人" :span="1">
            {{ displayValue(userName) }}
        </el-descriptions-item>
          <el-descriptions-item label="状态" :span="1">
            <el-tag :type="statusTag(warehousingCodeState)" size="default">
              {{ statusName(warehousingCodeState) }}
            </el-tag>
        </el-descriptions-item>
          <el-descriptions-item label="备注" :span="3">
            {{ displayValue(warehousingDescription) }}
        </el-descriptions-item>
      </el-descriptions>
      </div>
      
      <div class="summary-stats">
        <div class="stat-item">
          <div class="stat-label">入库种类</div>
          <div class="stat-value">{{ detailSummary.kinds }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">入库数量</div>
          <div class="stat-value">{{ formatNumber(detailSummary.quantity, false) }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">入库金额</div>
          <div class="stat-value amount">{{ formatCurrency(detailSummary.amount) }}</div>
        </div>
      </div>

    </el-card>

    <el-card shadow="never" class="tab-card">
      <el-tabs v-model="activeTab" stretch>
        <el-tab-pane label="其他信息" name="extra">
          <el-descriptions :column="3" border>
            <el-descriptions-item label="供应商">
              {{ displayValue(detail.supplierName) }}
            </el-descriptions-item>
            <el-descriptions-item label="联系人">
              {{ displayValue(detail.contactName) }}
            </el-descriptions-item>
            <el-descriptions-item label="联系电话">
              {{ displayValue(detail.contactPhone) }}
            </el-descriptions-item>
            <el-descriptions-item label="关联单号">
              {{ displayValue(detail.stockinGoodsNo) }}
            </el-descriptions-item>
            <el-descriptions-item label="入库类型">
              {{ displayValue(detail.warehousingName || detail.warehousingTypeName) }}
            </el-descriptions-item>
            <el-descriptions-item label="经办人">
              {{ displayValue(detail.userName) }}
            </el-descriptions-item>
            <el-descriptions-item label="制单备注" :span="3">
              {{ displayValue(detail.remark) }}
            </el-descriptions-item>
          </el-descriptions>
          <el-divider />
          <div class="attachment-block">
            <div class="attachment-title">附件</div>
            <el-empty
              v-if="!attachments.length"
              description="暂无附件"
              :image-size="80"
            />
            <el-space v-else wrap>
        <el-link
          v-for="item in attachments"
          :key="item.fileId"
          :href="item.url"
          target="_blank"
          type="primary"
        >
          {{ item.fileName }}
        </el-link>
      </el-space>
          </div>
        </el-tab-pane>

        <el-tab-pane label="入库明细" name="detail">
          <el-table
            :data="detailList"
            border
            style="width: 100%"
            height="480px"
            show-summary
            :summary-method="summaryMethod"
            stripe
            v-loading="loading"
          >
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="productName" label="货品名称" min-width="160" />
            <el-table-column prop="productCode" label="货品编号" min-width="140" />
            <el-table-column prop="categoryName" label="货品类型" min-width="120" />
            <el-table-column prop="spec" label="规格型号" min-width="120" />
            <el-table-column prop="unit" label="单位" width="80" />
            <el-table-column prop="locationName" label="入库库区" min-width="120" />
            <el-table-column prop="positionLabel" label="仓位" min-width="140">
              <template #default="{ row }">
                {{ row.positionLabel || '-' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="price"
              label="入库单价"
              width="120"
              align="right"
            >
              <template #default="{ row }">
                {{ formatCurrency(row.price, false) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="quantity"
              label="入库数量"
              width="110"
              align="right"
            >
              <template #default="{ row }">
                {{ formatNumber(row.quantity, false) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="amount"
              label="入库金额"
              width="140"
              align="right"
            >
              <template #default="{ row }">
                {{ formatCurrency(row.amount) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="beforeStock"
              label="入库前库存"
              width="120"
              align="right"
            />
            <el-table-column
              prop="afterStock"
              label="入库后库存"
              width="120"
              align="right"
            />
            <el-table-column prop="batchNo" label="批次号" min-width="120" />
            <el-table-column prop="productionDate" label="生成日期" min-width="140">
              <template #default="{ row }">
                {{ formatDate(row.productionDate) }}
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" min-width="160" />
          </el-table>
          <div class="table-summary">
            <span>入库种类：{{ detailSummary.kinds }}</span>
            <span>入库数量：{{ formatNumber(detailSummary.quantity, false) }}</span>
            <span>入库金额：{{ formatCurrency(detailSummary.amount) }}</span>
          </div>
        </el-tab-pane>

        <el-tab-pane label="操作记录" name="operation">
          <el-timeline v-if="operationLogs.length">
            <el-timeline-item
              v-for="item in operationLogs"
              :key="item.id"
              :timestamp="formatDateTime(item.operationTime)"
            >
              <div class="log-title">{{ item.operatorName }}</div>
              <div class="log-content">{{ item.operationContent }}</div>
            </el-timeline-item>
          </el-timeline>
          <el-empty v-else description="暂无操作记录" />
        </el-tab-pane>

        <el-tab-pane label="审核记录" name="audit">
          <el-timeline v-if="auditLogs.length">
            <el-timeline-item
              v-for="item in auditLogs"
              :key="item.id"
              :timestamp="formatDateTime(item.auditTime)"
              :type="item.status === 'approved' || item.status === 2 ? 'success' : 'danger'"
            >
              <div class="log-title">
                {{ item.auditorName }}（{{ statusName(item.status) }}）
              </div>
              <div class="log-content">{{ item.remark || '无备注' }}</div>
            </el-timeline-item>
          </el-timeline>
          <el-empty v-else description="暂无审核记录" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import moment from 'moment'
import { useRoute, useRouter } from 'vue-router'
import myaxios from '@/http/MyAxios'

interface WarehousingDetailRow {
  productCode: string
  productName: string
  categoryName: string
  spec: string
  unit: string
  locationName: string
  price: number
  quantity: number
  amount: number
  beforeStock: number
  afterStock: number
  batchNo: string
  productionDate: string
  remark: string
  positionRow?: number | null
  positionColumn?: number | null
  positionLayer?: number | null
  positionDepth?: number | null
  positionLabel?: string
}

interface AttachmentItem {
  fileId: string
  fileName: string
  url: string
}

interface OperationLog {
  id: string
  operatorName: string
  operationTime: string
  operationContent: string
}

interface AuditLog {
  id: string
  auditorName: string
  auditTime: string
  remark: string
  status: string | number
}

interface WarehousingDetail {
  warehousingId: string
  warehousingCode: string
  warehousingName: string
  warehousingTypeName: string
  warehousingCodeState: number | string
  storageDate: string
  warehouseName: string
  stockinGoodsNo: string
  supplierName: string
  contactName: string
  contactPhone: string
  userName: string
  documentCreator: string
  organizationName: string
  documentCreation: string
  reviewerPeople: string
  reviewTime: string
  remark: string
  warehousingNum: number
  warehousingMoney: number
  status: number | string
}

const router = useRouter()
const route = useRoute()

const detail = reactive<WarehousingDetail>({
  warehousingId: '',
  warehousingCode: '',
  warehousingName: '',
  warehousingTypeName: '',
  warehousingCodeState: '',
  storageDate: '',
  warehouseName: '',
  stockinGoodsNo: '',
  supplierName: '',
  contactName: '',
  contactPhone: '',
  userName: '',
  documentCreator: '',
  organizationName: '',
  documentCreation: '',
  reviewerPeople: '',
  reviewTime: '',
  remark: '',
  warehousingNum: 0,
  warehousingMoney: 0,
  status: '',
})

const detailList = ref<WarehousingDetailRow[]>([])
const attachments = ref<AttachmentItem[]>([])
const operationLogs = ref<OperationLog[]>([])
const auditLogs = ref<AuditLog[]>([])
const activeTab = ref('detail')
const loading = ref(false)

const currentStatus = computed(
  () => detail.warehousingCodeState ?? detail.status ?? '',
)

const canEditOrder = computed(() => {
  const status = currentStatus.value
  if (typeof status === 'number') {
    return status === 0 || status === 1 || status === 3
  }
  return status !== 'approved'
})

const canDeleteOrder = computed(() => canEditOrder.value)

const canRevokeOrder = computed(() => {
  const status = currentStatus.value
  if (typeof status === 'number') {
    return status === 2
  }
  return status === 'approved'
})

const displayValue = (value?: string | number) => {
  if (value === null || value === undefined || value === '') {
    return '-'
  }
  return value
}

const formatNumber = (value?: number, withUnit = true) => {
  const num = Number(value || 0)
  return withUnit ? num.toLocaleString() : num
}

const formatCurrency = (value?: number, withSymbol = true) => {
  const amount = Number(value || 0).toFixed(2)
  return withSymbol ? `￥${amount}` : amount
}

const parseNumberValue = (value: any) => {
  const num = Number(value)
  return Number.isFinite(num) ? num : null
}

const buildPositionLabel = (params: {
  positionRow?: number | null
  positionColumn?: number | null
  positionLayer?: number | null
  positionDepth?: number | null
  positionCode?: string | null
}) => {
  const parts: string[] = []
  const append = (val: number | null | undefined, suffix: string) => {
    if (typeof val === 'number' && !Number.isNaN(val) && val > 0) {
      parts.push(`${val}${suffix}`)
    }
  }
  append(params.positionRow, '排')
  append(params.positionColumn, '列')
  append(params.positionLayer, '层')
  append(params.positionDepth, '深')
  if (parts.length) {
    return parts.join('')
  }
  return params.positionCode || ''
}

const formatDate = (date?: string) => {
  if (!date) return '-'
  return moment(date).format('YYYY-MM-DD')
}

const formatDateTime = (date?: string) => {
  if (!date) return '-'
  return moment(date).format('YYYY-MM-DD HH:mm:ss')
}

const statusTag = (status: string | number) => {
  if (typeof status === 'number') {
    switch (status) {
      case 0:
        return 'info'
      case 1:
        return 'warning'
      case 2:
        return 'success'
      case 3:
        return 'danger'
      default:
        return 'info'
    }
  }
  switch (status) {
    case 'approved':
      return 'success'
    case 'pending':
      return 'warning'
    case 'rejected':
      return 'danger'
    default:
      return 'info'
  }
}

const statusName = (status: string | number) => {
  if (typeof status === 'number') {
    switch (status) {
      case 0:
        return '草稿'
      case 1:
        return '待审核'
      case 2:
        return '已完成'
      case 3:
        return '驳回'
      default:
        return '未知'
    }
  }
  switch (status) {
    case 'draft':
      return '草稿'
    case 'pending':
      return '待审核'
    case 'approved':
      return '已完成'
    case 'rejected':
      return '驳回'
    default:
      return '未知'
  }
}

const summaryMethod = ({
  columns,
  data,
}: {
  columns: { property: string }[]
  data: WarehousingDetailRow[]
}) => {
  const sums: (string | number)[] = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }
    if (column.property === 'quantity') {
      sums[index] = data.reduce(
        (sum, item) => sum + Number(item.quantity || 0),
        0,
      )
      return
    }
    if (column.property === 'amount') {
      const total = data.reduce(
        (sum, item) => sum + Number(item.amount || 0),
        0,
      )
      sums[index] = `￥${total.toFixed(2)}`
      return
    }
    sums[index] = ''
  })
  return sums
}

const detailSummary = computed(() => {
  const quantity = detailList.value.reduce(
    (sum, item) => sum + Number(item.quantity || 0),
    0,
  )
  const amount = detailList.value.reduce(
    (sum, item) => sum + Number(item.amount || 0),
    0,
  )
  return {
    kinds: detailList.value.length,
    quantity,
    amount,
  }
})

const handleEdit = () => {
  if (!detail.warehousingId) return
  router.push({
    path: '/CreateWarehousing',
    query: { warehousingId: detail.warehousingId },
  })
}

const handleCopy = async () => {
  if (!detail.warehousingId) return
  try {
    const response = await myaxios.post('/api/Warehousing/CopyWarehousing', [
      detail.warehousingId,
    ])
    if (response.data?.success || response.data?.code === 200) {
      ElMessage.success('复制成功')
      loadDetail()
    } else {
      ElMessage.error(response.data?.message || '复制失败')
    }
  } catch (error) {
    console.error('复制失败:', error)
    ElMessage.error('复制失败，请稍后重试')
  }
}

const handleRevoke = () => {
  if (!detail.warehousingId) return
  ElMessageBox.confirm('确认撤销该入库单吗？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      try {
        const response = await myaxios.put(
          '/api/Warehousing/RevokeWarehousing',
          null,
          { params: { warehousingId: detail.warehousingId } },
        )
        if (response.data?.success || response.data?.code === 200) {
          ElMessage.success('撤销成功')
          loadDetail()
        } else {
          ElMessage.error(response.data?.message || '撤销失败')
        }
      } catch (error) {
        console.error('撤销失败:', error)
        ElMessage.error('撤销失败，请稍后重试')
      }
    })
    .catch(() => {})
}

const handlePrint = () => {
  if (!detail.warehousingId) return
  const baseUrl = (myaxios.defaults.baseURL || '').replace(/\/$/, '')
  window.open(
    `${baseUrl}/api/Warehousing/PrintWarehousing?warehousingId=${detail.warehousingId}`,
    '_blank',
  )
}

const handleDelete = () => {
  if (!detail.warehousingId) return
  ElMessageBox.confirm('确认删除该入库单吗？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      try {
        const response = await myaxios.delete(
          `/api/Warehousing/DeleteWarehousing?warehousingId=${detail.warehousingId}`,
      )
        if (response.data?.success || response.data?.code === 200) {
      ElMessage.success('删除成功')
      router.back()
        } else {
          ElMessage.error(response.data?.message || '删除失败')
        }
      } catch (error) {
        console.error('删除失败:', error)
        ElMessage.error('删除失败，请稍后重试')
      }
    })
    .catch(() => {})
}
const warehousingIds = ref<string | number | null>(null)
const userName = ref('') // 制单人
const warehousingTypeId = ref('') // 入库类型
const stockinGoodsNo = ref('') // 关联单号
const contactInformation = ref('') // 联系方式
const warehousingDescription = ref('') // 备注
const organizationName = ref('') // 所在部门
const warehouseName = ref('') // 仓库
const supplierName = ref('') // 供应商
const documentCreator = ref('') // 经办人
const documentCreation = ref('') // 制单时间
const storageDate = ref('') // 入库日期
const contact = ref('') // 交货人
const warehousingCodeState: any = ref('') // 状态

const normalizeDetailRow = (item: any): WarehousingDetailRow => {
  const positionRow = parseNumberValue(
    item.positionRow ?? item.PositionRow ?? item.rowNumber ?? item.positionrow ?? null,
  )
  const positionColumn = parseNumberValue(
    item.positionColumn ?? item.PositionColumn ?? item.columnNumber ?? item.positioncolumn ?? null,
  )
  const positionLayer = parseNumberValue(
    item.positionLayer ?? item.PositionLayer ?? item.layerNumber ?? item.positionlayer ?? null,
  )
  const positionDepth = parseNumberValue(
    item.positionDepth ?? item.PositionDepth ?? item.depthNumber ?? item.positiondepth ?? null,
  )
  const positionCode =
    item.positionCode ||
    item.PositionCode ||
    item.positionName ||
    item.positionname ||
    item.position_label ||
    null
  const positionLabel = buildPositionLabel({
    positionRow,
    positionColumn,
    positionLayer,
    positionDepth,
    positionCode,
  })

  return {
    productCode: item.productCode || item.goodsCode || item.productid || '-',
    productName: item.productName || item.goodsName || '-',
    categoryName: item.categoryName || item.productCategoryName || item.goodsTypeName || '-',
    spec:
      item.spec ||
      item.specification ||
      item.productSpecification ||
      item.specModel ||
      item.model ||
      '-',
    unit: item.unit || item.unitName || item.goodsUnit || '-',
    locationName:
      item.locationName ||
      item.storageLocationName ||
      item.warehousingLocationName ||
      item.storagelocationName ||
      '-',
    price: Number(
      item.price ??
        item.costPrice ??
        item.unitPrice ??
        item.warehousingPrice ??
        item.inPrice ??
        0,
    ),
    quantity: Number(
      item.quantity ??
        item.newInputNum ??
        item.inQty ??
        item.warehousingNum ??
        item.totalQuantity ??
        0,
    ),
    amount: Number(
      item.amount ??
        item.totalCostPrice ??
        item.warehousingMoney ??
        item.currentAmount ??
        0,
    ),
    beforeStock: Number(
      item.beforeStock ??
        item.inventoryBefore ??
        item.oldStock ??
        item.currentStock ??
        0,
    ),
    afterStock: Number(
      item.afterStock ??
        item.inventoryAfter ??
        item.newStock ??
        item.currentStock ??
        0,
    ),
    batchNo: item.batchNo || item.inputBatch || item.batchNumber || '-',
    productionDate:
      item.productionDate ||
      item.inputTime ||
      item.generateDate ||
      item.productDate ||
      '',
    remark: item.remark || item.inputNote || item.detailRemark || item.remarks || '-',
    positionRow,
    positionColumn,
    positionLayer,
    positionDepth,
    positionLabel: positionLabel || '',
  }
}

const loadDetail = async () => {
  const warehousingId = String(route.query.warehousingId || '')
  if (!warehousingId) {
    ElMessage.error('缺少入库单ID')
    return
  }
  loading.value = true
  try {
    const res = await myaxios.get('/api/Warehousing/GetWarehousingDetail', {
      params: { warehousingId },
    })
    const data = res.data?.data || {}

    Object.assign(detail, {
      warehousingId: data.warehousingId,
      warehousingCode: data.warehousingCode || data.receiptCode,
      warehousingName: data.warehousingName || data.warehousingTypeName,
      warehousingTypeName: data.warehousingTypeName,
      warehousingCodeState: data.warehousingCodeState ?? data.status,
      storageDate: data.storageDate || data.receiptDate,
      warehouseName: data.warehouseName,
      stockinGoodsNo: data.stockinGoodsNo || data.refOrderCode,
      supplierName: data.supplierName,
      contactName: data.contactName,
      contactPhone: data.contactPhone || data.contactInformation,
      userName: data.userName || data.handlerName,
      documentCreator: data.documentCreator || data.makerName,
      organizationName: data.organizationName || data.departmentName,
      documentCreation: data.documentCreation || data.makeTime,
      reviewerPeople: data.reviewerPeople || data.auditorName,
      reviewTime: data.reviewTime || data.auditTime,
      remark: data.warehousingDescription || data.remark,
      warehousingNum: data.warehousingNum || data.inQty || 0,
      warehousingMoney: data.warehousingMoney || data.inAmount || 0,
      status: data.status,
    })

    warehousingIds.value =
      detail.warehousingCode || data.warehousingId || data.receiptCode || '-'
    userName.value = detail.userName || '-'
    warehousingTypeId.value =
      detail.warehousingName || data.warehousingTypeId || '-'
    stockinGoodsNo.value = detail.stockinGoodsNo || '-'
    contactInformation.value = detail.contactPhone || data.contactInformation || '-'
    warehousingDescription.value = detail.remark || '-'
    organizationName.value = detail.organizationName || '-'
    warehouseName.value = detail.warehouseName || '-'
    supplierName.value = detail.supplierName || '-'
    documentCreator.value = detail.documentCreator || '-'
    documentCreation.value = detail.documentCreation || ''
    storageDate.value = detail.storageDate || ''
    contact.value = data.contact || detail.contactName || '-'
    warehousingCodeState.value = detail.warehousingCodeState ?? ''

    const detailSource =
      data.detailList ||
      data.details ||
      data.warehousingDetails ||
      data.warehousingDetailList ||
      data.inboundDetails ||
      []
    detailList.value = detailSource.map((item: any) => normalizeDetailRow(item))

    attachments.value = data.attachments || []
    operationLogs.value = data.operationLogs || data.operateLogs || []
    auditLogs.value = data.auditLogs || data.reviewLogs || []
  } catch (error) {
    console.error('获取详情失败', error)
    ElMessage.error('获取详情失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadDetail()
})
</script>

<style scoped>
.warehousing-detail {
  padding: 16px;
}

.detail-header {
  margin-bottom: 16px;
}

.summary-card {
  margin-bottom: 16px;
}

.summary-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.summary-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.code-line {
  font-size: 18px;
  font-weight: 600;
  color: #1f2d3d;
}

.label {
  color: #606266;
  font-size: 14px;
  margin-right: 4px;
}

.code {
  font-size: 20px;
  margin-right: 12px;
}

.status-tag {
  vertical-align: middle;
}

.sub-line {
  color: #909399;
  font-size: 14px;
  display: flex;
  gap: 24px;
}

.summary-actions {
  display: flex;
  gap: 8px;
}

.summary-info {
  margin-bottom: 20px;
}

.summary-stats {
  display: flex;
  gap: 24px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 16px;
  background: #f6f8fb;
  border-radius: 8px;
}

.stat-label {
  color: #909399;
  font-size: 14px;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.stat-value.amount {
  color: #f56c6c;
}


.tab-card {
  min-height: 620px;
}

.table-summary {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  padding: 12px 0;
  font-weight: 500;
  color: #303133;
}

.attachment-block {
  margin-top: 16px;
}

.attachment-title {
  font-weight: 600;
  margin-bottom: 8px;
}

.log-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.log-content {
  color: #606266;
}
</style>

